<template>
  <div class="followed-list">
    <h2>关注列表</h2>
    <div v-for="user in atts" :key="user.id" class="followed-user">
      <img 
        :src="'http://localhost:82/my/static/wbimg2/' + user.photo" 
        alt="User Photo" 
        class="user-photo"
      >
      <div class="user-info">
        <span class="username">{{ user.nickname }}</span>
        <p class="user-description">{{ user.description || '这个人很懒，什么都没有留下...' }}</p>
      </div>
      <div class="action-buttons">
        
          <button class="action-btn unfollow-btn" @click="quxiao(user.id)">取消关注</button>
     
        <!-- <router-link :to="{ name: 'viewUser', query: { id: user.id } }"> -->
          <!-- <button class="action-btn view-btn">看博主</button> -->
        <!-- </router-link> -->
      </div>
    </div>
    
    <!-- 如果没有关注用户 -->
    <div v-if="atts.length === 0" class="no-followed-users">
      <p>您还没有关注任何用户。</p>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import axios from 'axios';
// 示例数据，实际应用中应从 API 获取
const atts = ref([]);
import u from '../stores/userStore.js'
const op = u()
onMounted(async()=>{
  const p=await axios.get(`http://localhost:82/my/ajax/mylist?userid=${op.cur_user.id}`);
  atts.value=p.data.date
})

const router = useRouter();
async function quxiao(id){
await axios.post(`http://localhost:82/my/ajax/remove?id=${id}`);
 const p=await axios.get(`http://localhost:82/my/ajax/mylist?userid=${op.cur_user.id}`);
  atts.value=p.data.date
}

// 示例函数，实际逻辑根据需要调整
function unfollow(userId) {
  console.log(`Unfollowing user with ID: ${userId}`);
  // 实现取消关注的逻辑，例如发送请求到服务器
}

function viewUser(userId) {
  console.log(`Viewing user with ID: ${userId}`);
  // 导航到用户详情页或其他操作
}
</script>

<style scoped>
.followed-list {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.followed-list h2 {
  margin-bottom: 20px;
  font-size: 1.5em;
}

.followed-user {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-photo {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  margin-right: 15px;
}

.user-info {
  flex-grow: 1;
}

.username {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 5px;
}

.user-description {
  color: #777;
  font-size: 0.9em;
  margin: 0;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.action-btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 8px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background-color: #45a049;
}

.unfollow-btn {
  background-color: #f44336;
}

.unfollow-btn:hover {
  background-color: #e53935;
}

.view-btn {
  background-color: #007bff;
}

.view-btn:hover {
  background-color: #0056b3;
}

.no-followed-users {
  text-align: center;
  padding: 20px;
  color: #777;
}
</style>